<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="imgs.js"></script>

<style type="text/css">
*{ margin:0px; padding:0px;}
body,html{width:100%; height:100%; }
ul,li{ list-style-type:none;}
/* main */
#main{width:100%;height:100%;overflow:hidden;}
#main ul li{width:100%;height:100%;position:absolute;overflow:hidden;opacity:0;filter: alpha(opacity=0);}
#main ul li img{width:100%;heigth:100%;}
/* footer */
#footer{width:100%;height:62px;position:fixed;left:0px;bottom:0px;background:url(images/nav-bg.png) repeat-x;z-index:999}
#footer #page{width:200px;height:100%;margin-left:124px;font-size:25px;font-family:Arial, Helvetica, sans-serif;color:#666;}
#footer #page .left_page{display:inline-block;width:80px;height:100%;text-align:right;line-height:62px;}
#footer #page .right_page{text-align:left;} 
#footer .left_imgs{width:150px;height:94px;position:absolute;top:-50px;left:20px;border:3px solid #fff;cursor:pointer;}
#footer .left_imgs img{width:150px;height:94px;}
#footer .button{width:200px;height:62px;position:absolute;right:170px;top:0px;}
#footer .button span{display:block;width:100%;height:40px;margin-top:10px;}
#footer .button span a{display:inline-block;width:38px;height:38px;background:url(images/album.png);margin-right:10px;cursor:pointer;}
#footer .button span a.back_dull{background:url(images/back_dull.png);}
#footer .button span a.play_dull{background:url(images/play_dull.png);}
#footer .button span a.pause_dull{background:url(images/pause_dull.png);}
#footer .button span a.forward_dull{background:url(images/forward_dull.png);}
#footer .right_imgs{width:150px;height:94px;position:absolute;top:-50px;right:20px;border:3px solid #fff;cursor:pointer;}
#footer .right_imgs img{width:150px;height:94px;}
</style>
</head>

<body>

<div id="main">
	<ul>
		<li style="z-index:2;opacity:1;filter:alpha(opacity=100);"><img src="images/1.jpg" /></li>
		<li><img src="images/2.jpg" /></li>
		<li><img src="images/3.jpg" /></li>
		<li><img src="images/4.jpg" /></li>
		<li><img src="images/5.jpg" /></li>
		<li><img src="images/6.jpg" /></li>
		<li><img src="images/7.jpg" /></li>
		<li><img src="images/8.jpg" /></li>
		<li><img src="images/9.jpg" /></li>
	</ul>
</div>

<div id="footer">
	<div class="left_imgs"><img src="images/9.jpg" /></div>
	<div id="page"><span class="left_page">1</span> / <span class="right_page">9</span></div>
	<div class="button"><span><a></a><a class="back_dull"></a><a class="play_dull"></a><a class="forward_dull"></a></span></div>
	<div class="right_imgs"><img src="images/2.jpg" /></div>
</div>
	
</body>
</html>
